<template>
  <div>
    <!-- 搜索/新增 -->
    <div>
      <el-input v-model="formSearch.text" placeholder="请输入内容" class="search"></el-input>
      <el-select v-model="formSearch.type" placeholder="请选择" class='select'>
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" plain @click="search()">搜索</el-button>
      <el-button @click="reset()">重置</el-button>
      <el-button class="add" type="danger" @click="addmore()">识别新增</el-button>
      <el-button class="add" type="primary" @click="add()">新增</el-button>
    </div>
    <!-- 列表 -->
    <BaseTable
       :tableData="tableData"
       :loading="loading"
       :clickRow="true"
       :page="page"
       @pageChange="pageChange"
      >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="类型" prop="type" width="50">
        <template slot-scope="s">{{s.row.type | QuestionType}}</template>
      </el-table-column>
      <el-table-column prop="text" label="题目"></el-table-column>
      <el-table-column label="正确答案" prop="answer" width="100">
          <template slot-scope="s">
              <span v-if="s.row.type === 1">{{ s.row.answer | JudgeType }}</span>
              <span v-else>{{ s.row.answer | SelectType }}</span>
          </template>
      </el-table-column>
      <el-table-column width="180" prop="date" label="添加时间">
          <template slot-scope="s">
              {{ s.row.date | YTDHMS }}
          </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="s">
          <el-button type="text" class="cell-del-button" @click="remove(s.row._id)">删除</el-button>
          <el-button type="text" class="cell-del-button" @click="edit(s.row)">编辑</el-button>
        </template>
      </el-table-column>
    </BaseTable>
    <!-- 新增弹框 -->
    <Add ref="addDialog" @getListData="initData" :curData="curData"></Add>
  </div>
</template>

<script>
import {list,del} from '@/api/question'
export default {
  data(){
    return {
      curData: {},
      tableData: [],
      loading: false,
      formSearch: {
        text: '',
        type: ''
      }, 
      typeOptions:[
          {
              value : 0,
              label : '选择'
          },
          {
              value : 1,
              label : '判断'
          }
      ],
      page: {
        page: 1,
        limit: 10,
        total: 0
      },
    }
  },
  mounted() {
    this.initData();
  },
  components: {
    BaseTable: () => import("@/components/BaseTable"),
    Add: () => import("./AddQuestion.vue"),
  },
  methods:{
    //搜索
    search(){
      this.page.page = 1 
      this.initData()
    },
    //新增弹窗
    add() {
      this.curData = {}
      this.$refs.addDialog.open()
    },
    //批量增加
    addmore(){
      this.$router.push("/question/addmore")  
    },
    //编辑弹窗
    edit(val) {
      this.curData = val
      this.$refs.addDialog.open()
    },
    //重置
    reset() {
      this.formSearch.text = '',
      this.formSearch.type = '';
      this.page.page = 1;
      this.page.total = 0;
      this.initData();
    },
    //分页
    pageChange(val) {
      this.page = val;
      this.initData();
    },
    initData() {
     this.loading = true;
     let params = {
        page: this.page.page,
        limit: this.page.limit,
        text: this.formSearch.text,
        type: this.formSearch.type,
     }
     list(params)
       .then((res) => {
        console.log(res)
        if (res.status === 200) {
          this.tableData = res.data.data;
          this.page.total = res.data.total;
          console.log(this.tableData,444)
        }
        this.loading = false;
       })
       .catch((err) => {
         this.loading = false;
         this.$message.error("查询数据失败")
       })    
    },
    remove(id){
        this.$confirm('此操作将删除该题目,是否继续?','提示',{
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
        }).then(()=>{
            this.loading = true;
            del(id)
            .then((res)=>{
                console.log(res,456)
                if(res.status === 200){
                    this.$message.success("删除该题目成功!");
                    this.reset();
                }
                this.loading = false;
            })
            .catch((err)=>{
                this.loading = false;
                this.$message.error("删除题目失败")
                this.reset();
            })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.search{
  width: 40%;
  margin-right: 15px;
}
.select{
  margin-right: 15px;
}
.add{
  float: right;
  margin-right: 25px;
}
</style>